<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">
                    <h1 style="font-family: 新宋体;font-size: larger" v-show="videoControl || videoExamining">视频管理中心</h1>
                    <h1 style="font-family: 新宋体;font-size: larger" v-show="textControl || textExamining">文档管理中心</h1>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="课程总数" :value="totalCount"/>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="精品课程总数" :value="totalVip"/>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="非精品课程数" :value="totalOrdinary"/>
                </el-col>
            </el-row>
        </el-header>
        <el-row :gutter="0">
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-input v-model="pageInfo.search" size="default" placeholder="搜索关键词"/>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-button type="primary" @click="myPage" size="large">搜索</el-button>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"/>
                <el-button type="warning" @click="reset" size="large">重置</el-button>
            </el-col>

        </el-row>

        <el-main>

            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="课程名" prop="name" width="150"/>
                <el-table-column label="课程类别" prop="type" width="150"/>
                <el-table-column label="课程介绍" prop="intro" width="150"/>
                <el-table-column label="课程标签" prop="label" width="150">
                    <template #default="scope">
                        <el-tag size="large"
                                effect="plain"
                                v-for="(item) in scope.row.label.split('&')"
                                v-if="scope.row.label!=null && scope.row.label!=''"
                        >{{item}}

                        </el-tag>
                    </template>

                </el-table-column>
                <el-table-column label="文档类型" prop="textualType" v-if="textControl || textExamining" width="150"/>
                <el-table-column label="精品课程" prop="vip" width="150"/>
<!--                fixed="right"-->
                <el-table-column align="right" label="操作"  fixed="right">
                    <template #default="scope">
                        <CoursePreview :course="scope.row" :videoControl="videoControl" :textControl="textControl" :videoExamining="videoExamining" :textExamining="textExamining"></CoursePreview>
                        <EditCourse :scope="scope.row.id" :videoControl="videoControl" :textControl="textControl" :videoExamining="videoExamining" :textExamining="textExamining"></EditCourse>
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除课程
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next"
                           :page-size="pageInfo.pageSize"
                           :total="totalCount"
                           @current-change="changePageNum"
                           class="paginationclass"/>
        </el-main>
    </el-container>
</template>

<script setup>
    import {ref, reactive, onMounted, nextTick} from 'vue'
    import {useStore} from 'vuex'
    import {myClassPage, myExaminingTextPages, myTextPages, teacherExaminingCoursePage} from '@/api/user'
    import {
        courseOrdinaryCount, courseOrdinaryCountByTid,
        courseVipCount, courseVipCountByTid,
        deleteCourse,
        editCourse,
        updateCourse,
        updateIsDelete
    } from '@/api/course'
    import {useRouter} from 'vue-router'
    import {ElMessage, ElMessageBox} from "element-plus";
    import {updateTextIsDelete} from "@/api/textualmaterial";
    import EditCourse from '@/components/CreationCenter/EditCourseDialog'
    import CoursePreview from '@/components/CreationCenter/CoursePreview'


    //整体表格函数
    //表格的参数
    const tableData = ref([])
    const store = useStore();
    const router = useRouter();
    const editDialogVisible = ref(false);
    const dynamicTags = ref([])

    const pageInfo = reactive({pageNum: 1, pageSize: 8, id: store.getters.getId, search: ''});
    const totalCount = ref(0);
    const totalOrdinary = ref();
    const totalVip = ref();

    const props = defineProps(['videoControl','textControl','videoExamining','textExamining'])
    const videoControl = props.videoControl;
    const textControl = props.textControl;
    const videoExamining  = props.videoExamining;
    const textExamining = props.textExamining;
    onMounted(() => {
        totalVip.value = 0;
        totalOrdinary.value = 0;
        if (props.videoControl){
            myCoursePage();
        }else if (props.textControl){
            myTextPage();
        }else if (props.videoExamining){
            myExaminingCoursePage();
        }else if (props.textExamining){
            myExaminingTextPage();
        }

    });
    const courseCount = (data)=>{
        if (data!=null){
            for (let i = 0; i < data.length; i++) {
                if (data[i].vip == 'VIP'){
                    totalVip.value++;
                }else {
                    totalOrdinary.value++;
                }
            }
        }
    }
    //教师管理视频课程分页函数
    const myCoursePage = () => {
        myClassPage(pageInfo).then((res) => {
            if (res.data.total > 0) {
                const courses = res.data.list[0].courses
                tableData.value = res.data.list[0].courses;
                totalCount.value = res.data.total;
                courseCount(tableData.value);
            }
            else {
                tableData.value = []
            }
        })
        // courseOrdinaryCountByTid(store.getters.getId).then((res) => {
        //     totalOrdinary.value = res.data;
        // })
        // courseVipCountByTid(store.getters.getId).then((res) => {
        //     totalVip.value = res.data;
        // })
    };
    //教师待审核课程分页函数
    const myExaminingCoursePage = ()=>{
        teacherExaminingCoursePage(pageInfo).then((res) => {
            // console.log(res.data)
            if (res.data.total > 0) {
                const courses = res.data.list[0].courses
                tableData.value = courses;
                totalCount.value = res.data.total;
                courseCount(tableData.value);
            }else {
                tableData.value = []
            }

        })
        courseCount(tableData.value);

    }
    //文本资料管理
    const myTextPage = ()=>{
        myTextPages(pageInfo).then((res)=>{
            if (res.data.total > 0) {
                tableData.value = res.data.list[0].textualMaterials;
                totalCount.value = res.data.total;
                courseCount(tableData.value);
            }
            else {
                tableData.value = []
            }
        })

    }
    const myExaminingTextPage = ()=>{
        myExaminingTextPages(pageInfo).then((res)=>{
            console.log(res.data)
            if (res.data.total > 0) {
                tableData.value = res.data.list[0].textualMaterials;
                totalCount.value = res.data.total;
                courseCount(tableData.value);
            }
            else {
                tableData.value = []
            }
        })

    }
    const myPage = ()=>{
        totalVip.value = 0;
        totalOrdinary.value = 0;
        if (props.videoControl){
            myCoursePage();
        }else if (props.textControl){
            myTextPage();
        }else if (props.videoExamining){
            myExaminingCoursePage();
        }else if (props.textExamining){
            myExaminingTextPage();
        }
    }

    //改变页数函数
    const changePageNum = (pageNum) => {
        pageInfo.pageNum = pageNum
        totalVip.value = 0;
        totalOrdinary.value = 0;
        if (props.videoControl){
            myCoursePage();
        }else if (props.textControl){
            myTextPage();
        }else if (props.videoExamining){
            myExaminingCoursePage();
        }else if (props.textExamining){
            myExaminingTextPage();
        }
        // myCoursePage()
    }
    //搜索重置函数
    const reset = () => {
        pageInfo.search = '';
        totalVip.value = 0;
        totalOrdinary.value = 0;
        if (props.videoControl){
            myCoursePage();
        }else if (props.textControl){
            myTextPage();
        }else if (props.videoExamining){
            myExaminingCoursePage();
        }else if (props.textExamining){
            myExaminingTextPage();
        }
        // myCoursePage()
    }
    //删除函数
    const handleDelete = (index, row) => {
        ElMessageBox.confirm(
            '是否要删除当前课程',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                if (videoControl || videoExamining){
                    updateIsDelete(row.id).then((res) => {
                        ElMessage.success(`成功删除${row.name}，等待审核`)
                    })
                }else if (textControl || textExamining){
                    updateTextIsDelete({id:row.id}).then((res)=>{
                        ElMessage.success(`成功删除${row.name}，等待审核`);
                    })
                }

                location.reload()

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }
</script>

<style scoped>
    .el-col {
        text-align: center;
    }
    .paginationclass{
        display: flex;
        justify-content: center;
    }
</style>